<template>
  <div class="home">
    <div class="card" :class="{ 'open': item.isOpen }" v-for="(item, index) in cards" :key="index" @click="handleCards(index)">
      <div class="card-front"></div>
      <div class="card-back">
        <div class="card-content">{{ item.num }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="js">
import { onMounted, ref } from 'vue'
import { shuffle } from '@/utils'

const num = ref(60)
const cards = ref([])

const handleCards = (index) => {
  if (!cards.value[index].isOpen) {
    cards.value[index].isOpen = true
  } else {
    cards.value[index].isOpen = false
  }
}

onMounted(() => {
  for (let index = 1; index < num.value + 1; index++) {
    cards.value.push({
      num: index + '',
      isOpen: false
    })
  }
  shuffle(cards.value)
})
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;

  .card {
    display: inline-block;
    position: relative;
    margin: 10px;
    width: 100px;
    height: 150px;
    transition-duration: 0.6s;
    transform-style: preserve-3d;
    cursor: pointer;

    .card-front {
      width: 100%;
      height: 100%;
      position: absolute;
      background-color: #426666;
    }

    .card-back {
      width: 100%;
      height: 100%;
      position: absolute;
      visibility: hidden;
      transform: rotateY('180deg');
      background-image: linear-gradient(to bottom, #426666, #425066);

      .card-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 30px;
        font-weight: 600;
        color: #fff;
      }
    }
  }  
  
  .open {

    .card-front {
      visibility: hidden;
      transform: rotateY('180deg');
    }

    .card-back {
      transform: rotateY('360deg') !important;
      visibility: visible !important;
    }
  }
}
</style>